<template>
  <div>
    <ProductTitle></ProductTitle>
    <ProductRecommend></ProductRecommend>
    <ProductMore></ProductMore>
    <TabBar></TabBar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Product',
})
</script>

<script lang="ts" setup>
import TabBar from '@/components/TabBar/index.vue'
import ProductTitle from './productTitle/index.vue'
import ProductRecommend from './productRecommend/index.vue'
import ProductMore from './productMore/index.vue'
import { useproductStore } from '@/stores/product'
import { onMounted } from 'vue'

const productStore = useproductStore()
// 封装函数
function getproductStore() {
  productStore.getProductLsitData()
}

onMounted(() => {
  getproductStore()
})
</script>

<style scoped></style>
